<template>
    <a-layout
    >
        <a-layout-header
            style = "background-color: black;"
        >
            <a-row>
                <a-col>
                    <img
                        :height = "60"
                        src = "./assets/logo.png"
                    />
                </a-col>
            </a-row>
        </a-layout-header>
        <a-layout>
            <a-layout-sider
                style = "background-color: white;
                        "
            >
                <a-menu
                    v-model:openKeys="openKeys"
                    v-model:selectedKeys="selectedKeys"
                    mode="inline"
                    @click="onMenuClick"
                >
                    <a-menu-item key="/">
                        <home-two-tone />
                        <span>Home</span>
                    </a-menu-item>
                    <a-menu-item key="/mission/list">
                        <profile-two-tone />
                        <span>Mission List</span>
                    </a-menu-item>
                    <a-menu-item key="/mission/create">
                        <appstore-two-tone />
                        <span>Create Mission</span>
                    </a-menu-item>
                </a-menu>
            </a-layout-sider>
            <a-layout
                style="padding: 24px"
            >
                <a-layout-content
                    style = "background-color: white;
                             padding: 24px;
                            "
                >
                    <router-view />
                </a-layout-content>
            </a-layout>
        </a-layout>
        <a-layout-footer
            style = "background-color: #222222;"
            align = "bottom"
        >
        123
        </a-layout-footer>
    </a-layout>
</template>
<script>
import { HomeTwoTone, AppstoreTwoTone, ProfileTwoTone } from '@ant-design/icons-vue';

export default {
    components: {
        HomeTwoTone,
        AppstoreTwoTone,
        ProfileTwoTone
    },
    data() {
        return {
            openKeys: ['sub1', 'sub2'],
            selectedKeys: ['1']
        }
    },
    methods: {
        onMenuClick(e) {
            this.$router.push({ path: e.key});
        }
    }
};
</script>
<style>

</style>